import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { SystemParamDataItemType, SystemParamStateType } from './typings'
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import {
  ElCard,
  ElSpace,
  ElButton,
  ElIcon,
  ElFormItem,
  ElInput,
  ElMessageBox,
  ElMessage
} from 'element-plus'
import { Plus, View, EditPen, Delete } from '@element-plus/icons-vue'
import ProSaasTable from '~/components/ProSaasTable'
import SystemParamOptionsModal from './options'

export default defineComponent(function SystemParam() {
  const store = useStore()
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<SystemParamDataItemType>({})
  const state = reactive<SystemParamStateType>({
    modalVisible: false,
    type: 'read',
    record: {}
  })

  // 打开操作弹框
  const handleChangeOptionsModal = (
    type: SystemParamStateType['type'],
    record?: SystemParamDataItemType
  ) => {
    state.modalVisible = !state.modalVisible
    state.record = record || {}
    state.type = type
    if (!state.modalVisible) proSaasTableRef.value!?.toSearch()
  }

  // 打开删除消息确认框
  const handleOpenDeleteConfirm = (record?: SystemParamDataItemType) => {
    if (!record && !proSaasTableRef.value!.selecteds?.length) {
      ElMessage({ type: 'warning', message: '请选择至少一条数据' })
      return
    }
    const params = record?.id || proSaasTableRef.value!.selecteds?.map?.((item) => item.id)
    ElMessageBox.confirm('确定将选择数据删除?', {
      buttonSize: 'small',
      type: 'warning',
      closeOnClickModal: false, // 点遮罩层不关弹窗
      draggable: true // 可拖拽
    })
      .then(async () => {
        await store.dispatch('systemParam/DeleteSystemParamInfo', { ids: params }).then((res) => {
          if (res?.code === 200) {
            proSaasTableRef.value!?.clearSelection?.()
            proSaasTableRef.value!?.toSearch()
            ElMessage({ type: 'success', message: '操作成功' })
          }
        })
      })
      .catch(() => {})
  }
  const columns: TableColumnProps<SystemParamDataItemType>[] = [
    {
      label: '参数名称',
      prop: 'paramName'
    },
    {
      label: '参数键名',
      prop: 'paramKey'
    },

    {
      label: '参数键值',
      prop: 'paramValue'
    },
    {
      label: '操作',
      prop: 'options',
      width: 166,
      render: ({ row }) => (
        <ElSpace>
          <ElButton text type="primary" onClick={() => handleChangeOptionsModal('read', row)}>
            <ElIcon>
              <View />
            </ElIcon>
            &nbsp; 查看
          </ElButton>
          <ElButton text type="primary" onClick={() => handleChangeOptionsModal('update', row)}>
            <ElIcon>
              <EditPen />
            </ElIcon>
            &nbsp; 编辑
          </ElButton>
          <ElButton text type="primary" onClick={() => handleOpenDeleteConfirm(row)}>
            <ElIcon>
              <Delete />
            </ElIcon>
            &nbsp; 删除
          </ElButton>
        </ElSpace>
      )
    }
  ]
  return () => (
    <ElCard>
      <ProSaasTable<SystemParamDataItemType>
        ref={proSaasTableRef}
        columns={columns}
        hasIndex
        dispatchType="systemParam/GetSystemParamList"
        headerTitle={
          <>
            <ElButton type="primary" onClick={() => handleChangeOptionsModal('add')}>
              <ElIcon>
                <Plus />
              </ElIcon>
              &nbsp; 新增
            </ElButton>
          </>
        }
        searchFormProps={{
          model: formValues
        }}
        searchformResponsiveCol={[
          <ElFormItem key="paramName" prop="paramName" label="参数名称">
            <ElInput v-model={formValues.paramName} />
          </ElFormItem>,
          <ElFormItem key="paramKey" prop="paramKey" label="参数键名">
            <ElInput v-model={formValues.paramKey} />
          </ElFormItem>
        ]}
      />
      {state.modalVisible && (
        <SystemParamOptionsModal
          visible={state.modalVisible}
          type={state.type}
          record={state.record}
          onCancel={() => handleChangeOptionsModal('read')}
        />
      )}
    </ElCard>
  )
})
